<template>
        <el-card shadow="never" style="max-height: 700px; overflow: auto">
            <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled">
<!--                <el-form-item label="id:" prop="id" v-show="false">-->
<!--                    <el-input v-model="form.id" disabled />-->
<!--                </el-form-item>-->
<!--                <el-form-item label="用户id:" prop="user_id">-->
<!--                    <el-input-number v-model="form.user_id" :step="1" :min="0"></el-input-number>-->
<!--                </el-form-item>-->
                <el-form-item label="标题:" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题" clearable />
                </el-form-item>
                <el-form-item label="标签:" prop="tab">
                    <el-select v-model="form.tab" placeholder="请选择标签" clearable>
                        <el-option v-for="(item, index) in tab" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="文章轮播图:" prop="image_list">
                    <ImageUpload v-model="form.image_list" :limit="10" />
                </el-form-item>
                <el-form-item label="分类:" prop="type">
                    <el-select v-model="form.type" placeholder="请选择分类" clearable>
                        <el-option v-for="(item, index) in type" :key="index" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="点赞数:" prop="zan_num">-->
<!--                    <el-input-number v-model="form.zan_num" :step="1" :min="0"></el-input-number>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="评论数:" prop="comment_num">-->
<!--                    <el-input-number v-model="form.comment_num" :step="1" :min="0"></el-input-number>-->
<!--                </el-form-item>-->
                <el-form-item label="内容:" prop="content">
                    <el-input v-model="form.content" placeholder="请输入内容" :rows="4" type="textarea" />
                </el-form-item>
                <el-form-item label="状态:" prop="is_del">
                    <el-radio-group v-model="form.is_del">
                        <el-radio v-for="(item, index) in is_del" :key="index" :label="item.value">{{ item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="submitForm">确认 </el-button>
                    <el-button type="warning" @click="cancel">取消 </el-button>
                </el-form-item>
            </el-form>
        </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {}
        },
        editFormParams: {
            type: Object,
            default: {}
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                title: [{ required: true, message: "请输入标题", trigger: "blur" }],
                tab: [{ required: true, message: "请输入标签", trigger: "blur" }],
                type: [{ required: true, message: "请输入分类", trigger: "blur" }],
                content: [{ required: true, message: "请输入内容", trigger: "blur" }],
                is_del: [{ required: true, message: "请输入状态", trigger: "blur" }],

            },
            form: {  },
            // 区域选择配置
            areaOptions: regionData,
            tab:[
               { label: "未打标签", value: 0 },
               { label: "好评回答", value: 1 },
            ],
            type:[
               { label: "广场", value: 1 },
               { label: "经验", value: 2 },
            ],
            is_del:[
               { label: "显示", value: 0 },
               { label: "隐藏", value: 1 },
            ],

        }
    },
    watch: {
        findFormData: {
           handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        }
    }
}
</script>
